iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
自我挑戰組

我要成為全端王!系列 第 19

全端入門Day19_前端程式撰寫之JavaScript

  • 分享至 

  • xImage
  •  

說完了HTML跟CSS了,就剩下JavaScript了!

JavaScript入門

要讓網頁能夠有動起來的感覺,我們就來做個時間,當我們按下按鈕就會出現時間,程式碼一樣用之前的來改
但是在這之前要先來介紹id跟class,不然會沒辦法操作,

  • ID
    基本上是用來給JavaScript使用,而且每一個ID都是獨立的也就是說不會有2個ID一樣(學生不會有一樣的學號)。
  • class
    基本上是用來給CSS用的,class可以很多個人有,就像是一個班級(class)一樣有很多的學生

當然CSS也是能用在ID,這是沒問題的。然後class對到CSS要用.而ID對到CSS則是用#,不要搞混了喔

我們可以看以下的例子,你也可以照著做:
在body寫個h4和h5,然後一個用ID另一個用class
https://ithelp.ithome.com.tw/upload/images/20210904/2014012604uiMeog27.jpg
然後換到CSS,記得ID要用#,class用.
https://ithelp.ithome.com.tw/upload/images/20210904/2014012636AhLmB59l.jpg
結果就會像這樣:
https://ithelp.ithome.com.tw/upload/images/20210904/201401264s4kNoJgoZ.jpg
大致了解後,就能開始進入今天的JavaScript了:
先新增個button按鈕,然後存檔後開啟index.html你會發現沒有任何動靜
https://ithelp.ithome.com.tw/upload/images/20210904/20140126Tj2hTwVO0T.jpg

今天先介紹到這,明天會把按鈕的JavaScript給寫出來。


上一篇
全端入門Day18_前端程式撰寫之CSS終
下一篇
全端入門Day20_前端程式撰寫之多一點的JavaScript
系列文
我要成為全端王!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言